<template>
  <div>
    <!--面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card >
      <el-row>
        <el-col :span="8">
            <el-select v-model="queryInfo.userId" filterable placeholder="请选择用户">
              <el-option
                v-for="item in userList"
                v-bind:key="item.id"
                :label="item.username"
                :value="item.id"></el-option>
            </el-select>
            <el-button icon="el-icon-search" @click="getOrderList">搜索</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="goTestOrder" >模拟订单</el-button>
        </el-col>
      </el-row>
      <!--用户列表区域-->
      <el-table :data="orderList" border stripe >
        <!--展开列-->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.detailDTOS">
              <el-table-column label="商品分类名称" prop="cateName" align="center" ></el-table-column>
              <el-table-column label="商品图标" align="center">
                <template slot-scope="goods">
                  <img class="goodsImg" :src="goods.row.smallImg"/>
                </template>
              </el-table-column>
              <el-table-column label="商品名称" prop="goodsName" align="center" ></el-table-column>
              <el-table-column label="商品数量(个)" prop="goodsCount" align="center" ></el-table-column>
              <el-table-column label="需要支付(￥)" prop="payPrice" align="center" ></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="订单号" prop="orderId" width="150px"></el-table-column>
        <el-table-column label="用户名称" prop="userName" width="180px"></el-table-column>
        <el-table-column label="支付状态" width="150px">
          <template slot-scope="scope">
          <span v-if="scope.row.payStatue== '1'">已支付</span>
          <span v-else>未支付</span>
          </template>
        </el-table-column>
        <el-table-column label="发货状态" prop="sendStatus" width="150px">
          <template slot-scope="scope">
          <span v-if="scope.row.sendStatus== '0'">未发货</span>
          <span v-else-if="scope.row.sendStatus== '1'">已发货</span>
          <span v-else-if="scope.row.sendStatus== '2'">已收货</span>
          <span v-else>交易结束</span>
          </template>
        </el-table-column>
        <el-table-column label="订单时间" prop="createTime" width="180px"></el-table-column>
        <el-table-column label="发票所属" prop="billTitle" width="100px"></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button type="info" icon="el-icon-s-promotion" :disabled="scope.row.payStatue === 1 ? false:true" @click="setStatus(scope.row)" size="mini">状态</el-button>
            <el-button type="warning" icon="el-icon-edit" size="mini">修改地址</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeOrderById(scope.row.orderId)" >删除</el-button>
            <el-button type="primary" icon="el-icon-search" @click="showProgressBox(scope.row.orderId)" size="mini">物流</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!--调整发货状态区域-->
    <el-dialog
      title="发货状态"
      :visible.sync="sendVisible"
      width="30%">
      <el-form :model="sendForm">
      <el-button type="primary" icon="el-icon-s-promotion" @click="putSend(sendForm.id,1)" v-if="sendForm.sendStatus === 0 " size="mini">已发货</el-button>
      <el-button type="primary" icon="el-icon-s-promotion" @click="putSend(sendForm.id,2)" v-else-if="sendForm.sendStatus === 1 " size="mini">已收货</el-button>
      <el-button type="primary" icon="el-icon-s-promotion" @click="putSend(sendForm.id,3)" v-else-if="sendForm.sendStatus === 2" size="mini">交易结束</el-button>
      </el-form>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
    <!-- 展示物流进度的对话框-->
    <el-dialog
      title="物流进度"
      :visible.sync="progressVisible"
      width="50%">
      <!--时间线-->
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in progressInfo"
          :key="index"
          :timestamp="activity.createTime">
          {{activity.title}}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        userId: '',
        currentPage: 1,
        pageSize: 10
      },
      orderList: [],
      total: 0,
      userList: [],
      // 状态栏
      sendVisible: false,
      sendForm: {},
      progressVisible: false,
      progressInfo: []
    }
  },
  created() {
    this.getOrderList()
    this.getUserList()
  },
  methods: {
    async getOrderList() {
      const result = await this.$http.get('/order/orders', { params: this.queryInfo })
      if (result.data.code !== 200) return this.$message.error('用户订单列表数据获取失败')
      this.orderList = result.data.data.data
      this.total = result.data.data.total
    },
    // 跳转到测试订单页
    goTestOrder() {
      this.$router.push('/orders/test')
    },
    // 获取用户列表
    async getUserList() {
      const result = await this.$http.get('/user/all')
      if (result.data.code !== 200) {
        return this.$message.error('获取用户列表失败')
      }
      this.userList = result.data.data
    },
    // 删除订单
    async removeOrderById(orderId) {
      // 弹框询问是否删除订单
      const result = await this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果用户确认删除，则返回字符串 confirm
      // 如果用户取消删除，则返回字符串 cancel
      if (result !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const res = await this.$http.delete('/order/delete/' + orderId)
      if (res.data.code !== 200) {
        return this.$message.error('删除订单失败！')
      }
      this.$message.success('删除订单成功！')
      this.getOrderList()
    },
    // 监听pageSize改变
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getOrderList()
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.currentPage = newPage
      this.getOrderList()
    },
    // 发送订单页展示
    setStatus(order) {
      this.sendForm = order
      this.sendVisible = true
    },
    // 发货状态修改
    async putSend(id, status) {
      const result = await this.$http.put(`/order/${id}/send/${status}`)
      if (result.data.code !== 200) {
        return this.$message.error('更新发货状态失败')
      }
      this.$message.success('更新发货状态成功！')
      this.getOrderList()
      this.sendVisible = false
    },
    // 物流查看触发
    async showProgressBox(orderId) {
      // 获取物流信息
      const result = await this.$http.get('/order/getLogistics/' + orderId)
      if (result.data.code !== 200) {
        return this.$message.error('获取物流信息失败')
      }
      this.progressInfo = result.data.data
      this.progressVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
.goodsImg{
  width: 50px;
  margin: 10px 0;
}
</style>
